<!-- 按钮链接详情内容设置 -->
<template>
	<a-modal :width='400'
	    title='按钮编辑'
	    :visible="visible"
	    @ok="handleOk"
	    :confirmLoading="confirmLoading"
	    @cancel="handleCancel">
		 <a-form  :form='form' :label-col='{ span : 7}'  :wrapper-col="{ span : 16 }" >  

	        <a-form-item label="按钮文字" > 
		    	<a-input-group compact>
				    <a-input  style='width: 130px;'
				        v-decorator="['btnText', formset.btnText ]"
				    />
				    <a-select v-decorator="['textColor', formset.textColor ]">
				    	<a-select-option value='0'>白底黑字</a-select-option>
				    	<a-select-option value='1'>黑底白字</a-select-option>
				    </a-select>
				</a-input-group>
		    </a-form-item>  
		                       
		    <a-form-item  label='详情链接内容'>
		    	<a-select v-decorator="['clickUrl', formset.clickUrl ]">
			    	<a-select-option value='0'>商品列表</a-select-option>
			    	<a-select-option value='1'>商品</a-select-option>
			    	<a-select-option value='2'>自定义内容</a-select-option>
			    </a-select>
		    </a-form-item>

		    <!-- 详情链接内容： 选择商品列表 -->
		    <a-form-item  label='选择商品列表' >
		    	<a-select  v-decorator='["commodity"]'  placeholder='请选择' labelInValue  @change='themeOptionChange'> 
			    	<a-select-option  v-for='item in commodityData' :value='item.code' >{{item.themeName}}</a-select-option> 
			    </a-select>
			    <a-button @click='editSelectCommodity' v-if='form.getFieldValue("commodity")'>编辑商品列表</a-button> <br> 
			    <a-button @click='addSelectCommodity'>新增商品列表</a-button>
		    </a-form-item>
		    
		    <!-- 详情链接内容： 选择商品 -->
		    <a-form-item  label='选择商品'  v-if='form.getFieldValue("clickUrl") ==1'>
		    	<a-button @click='commodityVisible=true'>添加商品</a-button>
		    </a-form-item> 
 
	    </a-form>

	    <!-- 选择一个商品Modal -->
	    <selectCommodityOne :visible='commodityVisible' v-on:cancel='commodityVisible=false'></selectCommodityOne>	
	    <!-- 添加主题系列商品Modal -->
		<selectCommodity  ref='selectModal'  :visible='selectVisible' v-on:ok='themeFinished' v-on:cancel='selectVisible=false'></selectCommodity>
	</a-modal>
</template>

<script type="text/javascript">
	import { getCommodity_theme } from '@/api/minipro/commodity'
	import selectCommodityOne from '@/components/minipro/HomeSetting/selectCommodity'
	import  selectCommodity  from  '@/components/minipro/HomeSetting/selectCommodityOfList'
	export default{
		name:'btnSettingModal',
		props:{
		      visible:{
		        type:Boolean,
		        default:false
		      }, 
		  },
		data(){
			return {
				confirmLoading:false,/*确定按钮 loading**/
				commodityData:[],//主题Array

				formset:{
					btnText:{initialValue:''},
					textColor:{initialValue:'0'},
					clickUrl:{initialValue:'0'}, 
				},
				
				commodityVisible:false, 
				selectVisible:false,/*添加主题系列商品modal 显示*/
			}
		},
		beforeCreate () {
		    this.form = this.$form.createForm(this);
		},
		created(){
			this.pageInit()
		},
		methods:{
			pageInit(){
				getCommodity_theme({pageSize:100}).then((res)=>{
					this.commodityData = res.data.dataList 
				})
			},
			/*
				提交表单
			*/
			handleOk(){
				let form = this.form.getFieldsValue()
				console.log( this.form.getFieldsValue())
				this.$emit('ok',form) 
			},
			handleCancel(){  
				this.$emit('cancel')
			},

			/*
				添加商品主题列表
			*/
			addSelectCommodity(){
		    	this.selectVisible = true
		    	this.$refs.selectModal.$emit('openDialog') 
		    },
		    /*
				编辑商品主题列表
		    */
		    editSelectCommodity(){
		    	this.selectVisible = true
		    	let code = this.form.getFieldValue('commodity').key
		    	this.$refs.selectModal.$emit('editDialog',code) 
		    },
		    /*
				主题列表option-change
		    */
		    themeOptionChange(e){
		    	console.log(e)
		    },
		    /*
				完成添加/编辑
		    */
		    themeFinished(){
		    	this.pageInit()
		    	this.selectVisible = false
		    }

		},
		mounted(){
		    this.$nextTick(()=>{
		    	let that = this
		      	this.$on('openDialog',function(data){ 
		        	// console.log(data)

		        	Object.keys(that.formset).forEach((item)=>{ 
		         		that.formset[item].initialValue = data[item]
		         	})
		         	
			       	that.form.setFieldsValue({
			          	commodity:{key:data.themeCode}
			       	})
		      	})
		    })
		},
		components:{
			selectCommodityOne,
			selectCommodity
		}
	}
</script>